<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drifnet Display</title>

    <link rel="stylesheet" href="lightbox.min.css">

    <script src="jquery.min.js" ></script>
    <script src="lightbox.min.js"></script>

    <style>
        body {
            margin: 0;
        }
        header {
            margin-top: 0;
            background-color: #333;
            color: white;
            border-bottom: 1px solid lightgray;
        }
        header h2 {
            margin: 0 1em 0 0;
            padding-top: 0.2em;
            text-align: right;
            font-family: monospace;
            font-size: 18px;
            font-weight: bold;
        }
        #img-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 0.6em;
            margin: 0.4em;
        }
        #img-container a {
            position: relative;
        }
        #img-container img {
            max-width: 100%;
        }
        .img-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .close-image {
            display: none;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }
        #img-container a:hover .close-image {
            display: block;
        }
        .close-image:hover {
            width: 14px;
            height: 14px;
        }
        .dritfnet-image {
            border: 1px solid #999;
        }
        footer {
            font-size: 8px;
            text-align: right;
            border-top: 1px solid gainsboro;
            padding-top: 0.8em;
            margin-bottom: 0.2em;
        }
        footer a {
            margin: 0 1.2em 0 0;
            color: gray;
            font-style: italic;
            text-decoration: none;
            font-weight: bold;
        }

        .close-image {
            background: url()
              no-repeat left center;
            background-size: 12px;
        }

        /*
         * Rewrite paths to lightbox2 library images to not depend on the filesystem structure.
         * TODO: maybe, adapt the code and build system to resembles the former structure ?!
         */
        .lb-nav a.lb-prev {
            background: url()
              left 48% no-repeat;
        }
        .lb-nav a.lb-next {
            background: url()
              right 48% no-repeat;
        }
        .lb-data .lb-close {
            background: url()
              left 48% no-repeat;
        }
        .lb-cancel {
            background: url()
              no-repeat;
        }
    </style>
</head>

<body>

<header>
    <h2 >Driftnet</h2>
</header>

<div id="img-container"></div>

<footer>fork me on <a href="https://www.github.com/deiv/driftnet">GitHub</a></footer>

<script>
    $(document).ready(function(){
        lightbox.option({
            'resizeDuration': 200,
            'wrapAround': true
        })
    });

    function get_ws_url(extra_url)
    {
        var pcol;
        var u = document.URL;

        if (u.substring(0, 5) == "https") {
            pcol = "wss://";
            u = u.substr(8);
        } else {
            pcol = "ws://";
            if (u.substring(0, 4) == "http")
                u = u.substr(7);
        }
        u = u.split('/');
        /* + "/xxx" bit is for IE10 workaround */
        return pcol + u[0] + "/" + extra_url;
    }

    window.WebSocket = window.WebSocket || window.MozWebSocket;

    var ws = new WebSocket(get_ws_url(), "images-pipe-protocol");

    try {
        ws.onopen = function() {
            console.log("websocket connection opened");
        };
        ws.onmessage =function got_packet(msg) {
            $('#img-container').append(
                '<div class="img-wrap" src="' +
                msg.data +
                '"><a href="' +
                msg.data +
                '" data-lightbox="driftnet"><span class="close-image" title="close image"/><img class="dritfnet-image" id="' +
                msg.data +
                '" src="'+
                msg.data +
                '" /></a></div>');

            $(".close-image").click(function(event){
                event.stopPropagation();
                $( this ).parent().parent().remove();
                return false;
            });

        };
        ws.onclose = function(){
            console.log("websocket connection closed");
        }
    } catch(exception) {
        alert("Error: can't connect to websocket");
    };
</script>

</body>
</html>
